import React, { useState } from 'react';
import Cascader from 'rc-cascader';
import './rccascader.less';
// import 'rc-cascader/assets/index.css';
import 'rc-cascader/assets/index.less';

// 下拉框数据
const options = [
  {
    label: 'One',
    value: 'fj',
    children: [
      {
        label: 'one one',
        value: 'fuzhou',
        children: [
          {
            label: 'one one one',
            value: 'mawei'
          }
        ]
      },
      {
        label: 'two two',
        value: 'quanzhou'
      }
    ]
  },
  {
    label: '浙江',
    value: 'zj',
    children: [
      {
        label: '杭州',
        value: 'hangzhou',
        children: [
          {
            label: '余杭',
            value: 'yuhang'
          }
        ]
      }
    ]
  },
  {
    label: '北京',
    value: 'bj',
    children: [
      {
        label: '朝阳区',
        value: 'chaoyang'
      },
      {
        label: '海淀区',
        value: 'haidian',
        disabled: true
      }
    ]
  }
];

export default function RcCascader() {
  const [value, setValue] = useState();

  const handleChange = (newVal, selectedOptions) => {
    console.log('value', value, selectedOptions);
    setValue(selectedOptions.map(o => o.label));
  };

  const handleFilter = (inputValue, path) => {
    console.log('inputValue path', inputValue, path);
    return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
  };

  return (
    <div style={{ border: '1px solid red', position: 'relative', zIndex: 9999 }}>
      rc-cascader 级联下拉框
      <Cascader animation='slide-up' options={options} onChange={handleChange} showSearch={{ filter: handleFilter }}>
        <input placeholder='请选择地址' value={value} />
      </Cascader>
    </div>
  );
}

/**
 * import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import Checkbox from '@material-ui/core/Checkbox';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import TreeView from '@material-ui/lab/TreeView';
import TreeItem from '@material-ui/lab/TreeItem';

const options = [
  {
    label: 'Option 1',
    value: '1',
    children: [
      {
        label: 'Option 1.1',
        value: '1.1',
      },
      {
        label: 'Option 1.2',
        value: '1.2',
      },
    ],
  },
  {
    label: 'Option 2',
    value: '2',
    children: [
      {
        label: 'Option 2.1',
        value: '2.1',
      },
      {
        label: 'Option 2.2',
        value: '2.2',
      },
    ],
  },
];

const useStyles = makeStyles((theme) => ({
  root: {
    height: 240,
    flexGrow: 1,
    maxWidth: 400,
  },
}));

function MyComponent() {
  const [searchText, setSearchText] = useState('');
  const [filteredOptions, setFilteredOptions] = useState(options);
  const [selectedValues, setSelectedValues] = useState([]);

  function handleSearch(e) {
    const value = e.target.value;
    setSearchText(value);

    const filtered = options.filter((option) =>
      option.label.toLowerCase().includes(value.toLowerCase())
    );
    setFilteredOptions(filtered);
  }

  function handleSelection(value, selectedOptions) {
    setSelectedValues(value);
    console.log(value, selectedOptions);
  }

  function renderCheckboxOption(option) {
    return (
      <FormControlLabel
        key={option.value}
        control={
          <Checkbox
            checked={selectedValues.includes(option.value)}
            onChange={(e) => {
              if (e.target.checked) {
                setSelectedValues([...selectedValues, option.value]);
              } else {
                setSelectedValues(selectedValues.filter((value) => value !== option.value));
              }
            }}
            value={option.value}
          />
        }
        label={option.label}
      />
    );
  }

  function renderCheckboxTree(options) {
    return options.map((option) => (
      <TreeItem key={option.value} nodeId={option.value} label={renderCheckboxOption(option)}>
        {option.children && renderCheckboxTree(option.children)}
      </TreeItem>
    ));
  }

  const classes = useStyles();

  return (
    <div>
      <TextField
        label="Search options"
        value={searchText}
        onChange={handleSearch}
        variant="outlined"
      />

      <TreeView
        className={classes.root}
        defaultCollapseIcon={<ExpandMoreIcon />}
        defaultExpandIcon={<ChevronRightIcon />}
        onNodeToggle={(event, nodeIds) => console.log('onNodeToggle', nodeIds)}
        onNodeSelect={(event, nodeIds) => console.log('onNodeSelect', nodeIds)}
      >
        {renderCheckboxTree(filteredOptions)}
      </TreeView>
    </div>
  );
}

export default MyComponent;
 */
